<template>
    <div class="storeDetails">
        <Header title="店铺" />
        <div class="content">
            <div class="img"></div>
            <div class="foodSort">
                <div class="name">
                    {{ title }}
                    <img :src="img" alt="" class="store-img">
                </div>
                <van-tabs color="#ffc400">
                    <van-tab v-for="(item,index) in storeData" :title="item.name" >
                        <FoodList :index="index" :foodData="item.data" />
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <van-action-bar>
          <van-action-bar-icon icon="chat-o" text="客服" />
          <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.state.cartList.length" @click="goCart" />
          <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart" />
          <van-action-bar-button type="danger" text="立即购买" @click="goBuy" />
        </van-action-bar>
    </div>
</template>

<script>
import {reactive,toRefs} from 'vue';
import Header from '../../components/Header.vue';
import FoodList from './components/FoodList.vue';
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
import { Toast } from 'vant';
export default{
    components: {
        Header,
        FoodList,
    },
    setup(){
        let store = useStore();
        let router = useRouter();
        let data = reactive({
            title:"酸酸酸菜鱼",
            img:"http://img1.baidu.com/it/u=1599947592,1695977044&fm=253fmt=auto&app=138&f=JPEG?w=640&h=440",
            storeData: [
      {
        name: "点菜",
        data: {
          content: "点菜",
          items: [
            {
              text: "热销套餐",
              children: [
                {
                  pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
                  title: "隆江猪脚饭",
                  num: 0,
                  price: 25.0,
                  id: 0,
                  add: true,
                },
                {
                  pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
                  title: "隆江猪脚饭",
                  num: 0,
                  price: 25.0,
                  id: 1,
                  add: true,
                },
              ],
            },
            {
              text: "超级折扣",
              children: [
                {
                  pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                  title: "无骨酸菜鱼+肥牛双拼",
                  num: 0,
                  price: 25.0,
                  id: 5,
                  add: true,
                },
                {
                  pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                  title: "香辣水煮鱼+肥牛双拼",
                  num: 0,
                  price: 25.0,
                  id: 6,
                  add: true,
                },
              ],
            },
          ],
        },
      },
      {
        name: "评价",
        data: {
          content: "评价",
        },
      },
      {
        name: "商家",
        data: {
          content: "商家",
        },
      },
    ],

        });

        const handleAddCart = (type)=>{
          const newList = store.state.cartList || [];
          data.storeData.forEach(item=>{
            item.data.items?.forEach(item=>{
              item.children.forEach(item=>{
                if(item.num > 0){
                  newList.push(item);
                }
              });
            });
          });
          if(newList.length === 0){
            Toast("请选择商品");
            return;
          }
          store.commit('addcart',newList);
          type === "buy" ? goCart() : "";
        };
        const goCart = ()=>{
          router.push("/cart");
        }
        const goBuy = ()=>{
          handleAddCart("buy");
        };
        return {
            ...toRefs(data),
            handleAddCart,
            store,
            goCart,
            goBuy,
        };
    },
};
</script>

<style lang="less" scoped>
.storeDetails{
    height: 100%;
    display: flex;
    flex-flow: column;
    .content{
        flex: 1;
        overflow-y: auto;
        .img {
            background: url("../../assets/logo.png") no-repeat
            center/cover;
            width: 100%;
            height: 150px;
        }
        .foodSort{
            height: 500px;
            background-color: #fff;
            margin-top: -30px;
            border-radius: 20px 20px 0 0;

            .sort{
                margin-top: 10px;
            }
            .name{
                display: flex;
                padding: 20px;
                justify-content: space-between;
                .store-img{
                    width: 80px;
                    height: 80px;
                    border-radius: 10px;
                    margin-top: -30px;
                }
            }
        }
    }
}
</style>